<template>
    <div class="common-layout">
      <el-container>
        <!--顶部菜单栏-->
        <el-header style="background-color: #232b40; height: 72px;">
          <el-row style="padding-top: 10px">
            <el-col :span="1" style="padding-left: 7px;">
              <el-avatar src="/imgs/admin/logo.png" style="width: 55px;height: 55px;"></el-avatar>
            </el-col>
            <el-col :span="5">
              <span style="font-size: 30px;text-align: center;line-height: 55px;color: white">OA办公系统</span>
            </el-col>
            <el-col :span="10">
              <el-menu
                  :default-active="1"
                  class="el-menu"
                  mode="horizontal"
                  :ellipsis="false"
                  background-color="#232b40"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                  router

              >
                <el-menu-item index="/about">首页</el-menu-item>
                <el-sub-menu index="2">
                  <template #title>人事</template>
                  <el-menu-item index="/user">员工管理</el-menu-item>
                  <el-menu-item index="/role">角色管理</el-menu-item>
                  <el-menu-item index="/dept">部门管理</el-menu-item>
                </el-sub-menu>
<!--                <el-sub-menu index="3">-->
<!--                  <template #title>流程</template>-->
<!--                  <el-menu-item index="3.1">审批请求</el-menu-item>-->
<!--                  <el-menu-item index="3.2">审批记录</el-menu-item>-->
<!--                  <el-menu-item index="3.3">流程管理</el-menu-item>-->
<!--                </el-sub-menu>-->
                <el-sub-menu index="4">
                  <template #title>考勤</template>
                  <el-menu-item index="/attendance">考勤统计</el-menu-item>
                  <el-menu-item index="/management">考勤组管理</el-menu-item>
                  <el-menu-item index="/atteRule">班次规则</el-menu-item>
                  <el-menu-item index="/overtime">加班规则</el-menu-item>
                  <el-menu-item index="/leave">请假规则</el-menu-item>
                  <el-menu-item index="/replenish">补卡规则</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="5">
                  <template #title>资产</template>
                  <el-menu-item index="/asset">资产管理</el-menu-item>
                  <el-menu-item index="/assetCheck">资产盘点</el-menu-item>
                  <el-menu-item index="/vehicle">车辆管理</el-menu-item>
                  <el-menu-item index="/assetReq">资产领用</el-menu-item>
                  <el-menu-item index="/repair">维修管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="6">
                  <template #title>考核</template>
                  <el-menu-item index="/mode">评分</el-menu-item>
                  <el-menu-item index="/assessLevel">等级</el-menu-item>
                  <el-menu-item index="/target">考核指标</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="7">
                  <template #title>公告</template>
                  <el-menu-item index="/anno">公告管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="8">
                  <template #title>备忘</template>
                  <el-menu-item index="/note">会议备忘</el-menu-item>
                </el-sub-menu>

              </el-menu>
            </el-col>
            <el-col :span="5">
              <el-dropdown trigger="click" style="position: absolute;right: 20px;margin-top: 15px;">
              <span style="font-size:19px;font-weight: bold;color: white;text-decoration: underline">
                {{username}}
                <el-icon><arrow-down/></el-icon>
              </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-header>
        <!--    左侧菜单栏      -->
        <el-container>
          <el-aside style="background-color: white;width: 10vw;height: 100%">
            <el-menu
            unique-opened
            active-text-color="rgba(24, 144, 255)"
            style="width:100%;height:92vh"
            router
            >
              <el-menu-item index="/about">
                <template #title>
                  <el-icon><StarFilled /></el-icon><span>首页</span>
                </template>
              </el-menu-item>
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><Avatar /></el-icon><span>系统用户管理</span>
                </template>
                <el-menu-item index="/user">员工管理</el-menu-item>
                <el-menu-item index="/role">角色管理</el-menu-item>
                <el-menu-item index="/dept">部门管理</el-menu-item>
              </el-sub-menu>
<!--              <el-sub-menu index="2">-->
<!--                <template #title>-->
<!--                  <el-icon><Stamp /></el-icon><span>流程管理</span>-->
<!--                </template>-->
<!--                <el-menu-item index="/3.1">审批请求</el-menu-item>-->
<!--                <el-menu-item index="/3.2">审批记录</el-menu-item>-->
<!--                <el-menu-item index="/3.3">流程管理</el-menu-item>-->
<!--              </el-sub-menu>-->
              <el-sub-menu index="3">
                <template #title>
                  <el-icon><Briefcase /></el-icon><span>考勤管理</span>
                </template>
                  <el-menu-item index="/attendance">考勤统计</el-menu-item>
                <el-menu-item index="/management">考勤组管理</el-menu-item>
                <el-menu-item index="/atteRule">班次规则</el-menu-item>
                <el-menu-item index="/overtime">加班规则</el-menu-item>
                <el-menu-item index="/leave">请假规则</el-menu-item>
                <el-menu-item index="/replenish">补卡规则</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="4">
                <template #title>
                  <el-icon><TrendCharts /></el-icon><span>绩效考核</span>
                </template>
                  <el-menu-item index="/mode">评分制度</el-menu-item>
                  <el-menu-item index="/assessLevel">等级制度</el-menu-item>
                  <el-menu-item index="/target">考核指标</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="5">
                <template #title>
                  <el-icon><HomeFilled /></el-icon><span>固定资产管理</span>
                </template>
                <el-menu-item index="/asset">资产管理</el-menu-item>
                <el-menu-item index="/assetCheck">资产盘点</el-menu-item>
                <el-menu-item index="/vehicle">车辆管理</el-menu-item>
                <el-menu-item index="/assetReq">资产领用</el-menu-item>
                <el-menu-item index="/repair">维修管理</el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="6">
                <template #title>
                  <el-icon><List /></el-icon><span>公告文本</span>
                </template>
                <el-menu-item index="/anno">公告管理</el-menu-item>
                <el-menu-item index="/note">会议备忘</el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-aside>
          <!-- 右侧主体内容:可变区域 -->
          <el-main style="padding:0;overflow-y: auto;">
            <router-view/>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script setup>
import axios from "@/http";
import router  from "@/router";
import {ElMessage} from "element-plus";

const userInfo = getUser();
const username = userInfo?userInfo.username:'用户';

const logout=()=> {
  console.log('logout.....');
  // 调用后端登出接口
  axios.post('/oa/user/logout')
    .then(() => {
      // 接口调用成功后移除token和用户信息
      localStorage.removeItem('Authorization');
      // 跳转到登录页面
      router.push('/login');
      ElMessage.success("成功登出");
    })
    .catch(error => {
      console.error('登出失败', error);
      ElMessage.error("登出失败");
    });
}

</script>
